---
title: Оформление тематического оформления
description: Использование и настройка тем
---

# Оформление тематического оформления

## Использование и настройка тем

Вы можете настроить интерфейс RainbowKit в соответствии с вашим брендингом. Вы можете выбрать из нескольких предопределённых акцентных цветов и конфигураций радиус-границы.

Доступно 3 встроенных функции тем:

- `lightTheme` &nbsp; (по умолчанию)
- `darkTheme`
- `midnightTheme`

Функция тем возвращает объект темы. Вы можете передать объект в свойство `theme` инструмента `RainbowKitProvider`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Если хотите, вы можете передавать `accentColor`, `accentColorForeground`, `borderRadius`, `fontStack` и `overlayBlur`, чтобы настроить их.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### Настройка встроенных тем

Встроенные функции тем также принимают объект параметров, позволяющий выбрать один из нескольких различных визуальных стилей.

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        'Цвет фона/текста различных интерактивных элементов.',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        'Цвет, используемый для передних элементов, отображённых поверх акцентного цвета.',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: 'Размер всей шкалы радиуса границы.',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "Стек шрифтов, использующийся по всему интерфейсу. Обратите внимание, что вариант `rounded` пытается использовать SF Pro Rounded, возвращаясь к системным шрифтам, когда он недоступен.",
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: 'Размытие фоновой подложки модального окна.',
    },
  ]}
/>

К примеру, чтобы настроить тёмную тему с фиолетовым акцентным цветом и масштабом радиуса границ `medium`:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Каждая тема также предоставляет несколько предустановок акцентных цветов (`blue`, `green`, `orange`, `pink`, `purple`, `red`), которые можно добавить в объект параметров. Например, чтобы использовать предустановку акцентного цвета `pink`:

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Примеры

#### Функция тем

Вот несколько различных способов, как можно использовать свойство `theme`.

Используйте тему `darkTheme`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Используйте тему `midnightTheme`.

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### Цвет акцента

Вот несколько разных способов, как можно использовать конфигурацию `accentColor`.

Установите акцентный цвет на пользовательскую фиолетовую величину.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Установите акцентный цвет на встроенную предустановку `green`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Радиус границ

Вот несколько разных способов, как можно использовать конфигурацию `borderRadius`.

Установите радиус границ на `medium`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Установите радиус границ на `none`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> Напоминание: доступные значения радиуса границ: `large` (по умолчанию), `medium`, `small` и `none`.

#### Стек шрифтов

По умолчанию стек шрифтов настроен на `rounded`. Вот как вы можете использовать конфигурацию `fontStack`.

Установите стек шрифтов на `system`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Размытие наложения

По умолчанию размытие наложения установлено в `none`. Вот как вы можете использовать конфигурацию `overlayBlur`.

Установите размытие наложения на `small`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Комбинирование и согласование

Вот несколько различных способов, как вы можете использовать различные темы вместе со свойствами `accentColor`, `borderRadius` и `fontStack`.

- Используйте тему `lightTheme`
- Установите акцентный цвет на пользовательское фиолетовое значение
- Установите радиус границ на `medium`
- Установите стек шрифтов на `system`

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- Используйте тему `midnightTheme`
- Установите акцентный цвет на встроенную предустановку `pink`.
- Установите радиус границ на `small`
- Установите стек шрифтов на `system`

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Поддержка тёмного режима

Если ваше приложение использует стандартный медиа-запрос `prefers-color-scheme: dark` для переключения между светлым и тёмным режимами, вы можете обеспечить динамический объект темы, содержащий значения `lightMode` и `darkMode`.

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
